<template>
  <div class="analytics-dashboard">
    <a-row :gutter="[16, 16]">
      <!-- Overview Cards -->
      <a-col :span="6" v-for="card in overviewCards" :key="card.title">
        <a-card>
          <a-statistic
            :title="card.title"
            :value="card.value"
            :precision="card.precision || 0"
            :valueStyle="{ color: card.color || '#3f8600' }"
          >
            <template #prefix>
              <component :is="card.icon" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>

      <!-- User Growth Chart -->
      <a-col :span="12">
        <a-card title="用户增长趋势">
          <div ref="userGrowthChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- Retention Rate -->
      <a-col :span="12">
        <a-card title="用户留存率">
          <div ref="retentionChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- Reading Time Analysis -->
      <a-col :span="24">
        <a-card title="阅读时长分析">
          <div ref="readingTimeChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- Author Performance -->
      <a-col :span="12">
        <a-card title="作者数据中心">
          <div ref="authorChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- Reader Demographics -->
      <a-col :span="12">
        <a-card title="读者画像分析">
          <div ref="readerDemographicsChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- Real-time Monitoring -->
      <a-col :span="24">
        <a-card title="实时监控">
          <a-tabs>
            <a-tab-pane key="1" tab="服务器状态">
              <div ref="serverStatusChart" style="height: 300px"></div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="用户行为">
              <div ref="userBehaviorChart" style="height: 300px"></div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="异常警报">
              <a-list :dataSource="alerts" :pagination="{ pageSize: 5 }">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <a-tag :color="item.level === 'error' ? 'red' : 'orange'">{{ item.level }}</a-tag>
                    {{ item.message }}
                    <template #actions>
                      <a>处理</a>
                      <a>忽略</a>
                    </template>
                  </a-list-item>
                </template>
              </a-list>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import {
  UserOutlined,
  ReadOutlined,
  DollarOutlined,
  FieldTimeOutlined
} from '@ant-design/icons-vue'

export default defineComponent({
  name: 'AnalyticsDashboard',
  components: {
    UserOutlined,
    ReadOutlined,
    DollarOutlined,
    FieldTimeOutlined
  },
  setup() {
    const userGrowthChart = ref(null)
    const retentionChart = ref(null)
    const readingTimeChart = ref(null)
    const authorChart = ref(null)
    const readerDemographicsChart = ref(null)
    const serverStatusChart = ref(null)
    const userBehaviorChart = ref(null)

    const overviewCards = ref([
      {
        title: '总用户数',
        value: 125600,
        icon: 'UserOutlined',
        color: '#3f8600'
      },
      {
        title: '日活跃用户',
        value: 8526,
        icon: 'UserOutlined',
        color: '#1890ff'
      },
      {
        title: '总阅读时长',
        value: 256789,
        precision: 0,
        suffix: '小时',
        icon: 'FieldTimeOutlined',
        color: '#722ed1'
      },
      {
        title: '今日收入',
        value: 12580,
        precision: 2,
        prefix: '¥',
        icon: 'DollarOutlined',
        color: '#faad14'
      }
    ])

    const alerts = ref([
      {
        level: 'error',
        message: '服务器CPU使用率超过90%',
        time: '2024-01-20 10:30:00'
      },
      {
        level: 'warning',
        message: '用户登录失败率上升',
        time: '2024-01-20 10:25:00'
      }
    ])

    onMounted(() => {
      // Initialize charts
      initUserGrowthChart()
      initRetentionChart()
      initReadingTimeChart()
      initAuthorChart()
      initReaderDemographicsChart()
      initServerStatusChart()
      initUserBehaviorChart()
    })

    const initUserGrowthChart = () => {
      const chart = echarts.init(userGrowthChart.value)
      chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }]
      })
    }

    // Add other chart initialization methods...

    return {
      userGrowthChart,
      retentionChart,
      readingTimeChart,
      authorChart,
      readerDemographicsChart,
      serverStatusChart,
      userBehaviorChart,
      overviewCards,
      alerts
    }
  }
})
</script>

<style scoped>
.analytics-dashboard {
  padding: 24px;
}
</style> 